import { ISchema } from "../../packages/formily-json-schema/src";
import {
  ReactionsSetter,
  DataSourceSetter,
  ValidatorSetter,
} from "../../packages/designable-formily-setters/src";
import { FormItemSwitcher } from "../../common/FormItemSwitcher";
import { AllSchemas } from "../../schemas";

export const createComponentSchema = (
  component?: ISchema,
  decorator?: ISchema
): Record<string, ISchema> => {
  return {
    "component-group": component
      ? {
          type: "void",
          "x-component": "CollapseItem",
          "x-reactions": {
            fulfill: {
              state: {
                visible: '{{!!$form.values["x-component"]}}',
              },
            },
          },
          properties: {
            "x-component-props": component,
          },
        }
      : {},
    "decorator-group": decorator
      ? {
          type: "void",
          "x-component": "CollapseItem",
          "x-component-props": { defaultExpand: false },
          "x-reactions": {
            fulfill: {
              state: {
                visible: '{{!!$form.values["x-decorator"]}}',
              },
            },
          },
          properties: {
            "x-decorator-props": decorator,
          },
        }
      : {},
    "component-style-group": {
      type: "void",
      "x-component": "CollapseItem",
      "x-component-props": { defaultExpand: false },
      "x-reactions": {
        fulfill: {
          state: {
            visible: '{{!!$form.values["x-component"]}}',
          },
        },
      },
      properties: {
        "x-component-props.style": AllSchemas.CSSStyle,
      },
    },
    "decorator-style-group": {
      type: "void",
      "x-component": "CollapseItem",
      "x-component-props": { defaultExpand: false },
      "x-reactions": {
        fulfill: {
          state: {
            visible: '{{!!$form.values["x-decorator"]}}',
          },
        },
      },
      properties: {
        "x-decorator-props.style": AllSchemas.CSSStyle,
      },
    },
  };
};

export const createFieldSchema = (
  component?: ISchema,
  decorator: ISchema = AllSchemas.FormItem
): ISchema => {
  return {
    type: "object",
    properties: {
      "field-group": {
        type: "void",
        "x-component": "CollapseItem",
        properties: {
          name: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input",
          },
          title: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input",
          },
          description: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input.TextArea",
          },
          "x-display": {
            type: "string",
            enum: ["visible", "hidden", "none", ""],
            "x-decorator": "FormItem",
            "x-component": "Select",
            "x-component-props": {
              defaultValue: "visible",
            },
          },
          "x-pattern": {
            type: "string",
            enum: ["editable", "disabled", "readOnly", "readPretty", ""],
            "x-decorator": "FormItem",
            "x-component": "Select",
            "x-component-props": {
              defaultValue: "editable",
            },
          },
          default: {
            "x-decorator": "FormItem",
            "x-component": "ValueInput",
          },
          enum: {
            "x-decorator": "FormItem",
            "x-component": DataSourceSetter,
          },
          "x-reactions": {
            "x-decorator": "FormItem",
            "x-component": ReactionsSetter,
          },
          "x-validator": {
            type: "array",
            "x-component": ValidatorSetter,
          },
          required: {
            type: "boolean",
            "x-decorator": "FormItem",
            "x-component": "Switch",
          },
        },
      },
      ...createComponentSchema(component, decorator),
    },
  };
};

export const createVoidFieldSchema = (
  component?: ISchema,
  decorator: ISchema = AllSchemas.FormItem
): ISchema => {
  return {
    type: "object",
    properties: {
      "field-group": {
        type: "void",
        "x-component": "CollapseItem",
        properties: {
          name: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input",
          },
          title: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input",
            "x-reactions": {
              fulfill: {
                state: {
                  hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
                },
              },
            },
          },
          description: {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": "Input.TextArea",
            "x-reactions": {
              fulfill: {
                state: {
                  hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
                },
              },
            },
          },
          "x-display": {
            type: "string",
            enum: ["visible", "hidden", "none", ""],
            "x-decorator": "FormItem",
            "x-component": "Select",
            "x-component-props": {
              defaultValue: "visible",
            },
          },
          "x-pattern": {
            type: "string",
            enum: ["editable", "disabled", "readOnly", "readPretty", ""],
            "x-decorator": "FormItem",
            "x-component": "Select",
            "x-component-props": {
              defaultValue: "editable",
            },
          },
          "x-reactions": {
            "x-decorator": "FormItem",
            "x-component": ReactionsSetter,
          },
          "x-decorator": {
            type: "string",
            "x-decorator": "FormItem",
            "x-component": FormItemSwitcher,
          },
        },
      },
      ...createComponentSchema(component, decorator),
    },
  };
};
